<div class="well well-sm col-md-12" ng-if="certificate">
    <h4>The Leshan Certificate <small>(x509v3 der encoded)</small>
        <button class="btn btn-default btn-xs" ng-click="saveFile('serverCertificate.der', certificate.bytesDer)"
                title="Download server certificate(.der)"
                type="button">
		<span aria-hidden="true" class="glyphicon glyphicon-download-alt">
        </button>
    </h4>
    <p>
    <div class="col-md-7">
        <u>Hex : </u>
        <pre>{{certificate.hexDer}}</pre>
    </div>
    <div class="col-md-5">
        <u>Base64 : </u>
        <pre>{{certificate.b64Der}}</pre>
    </div>
    <small>Clients generally need it for X509 authentication.</small><br/>
    </p>
</div>
<div class="well well-sm col-md-12" ng-if="pubkey">
    <h4>The Leshan Public Key <small>(SubjectPublicKeyInfo der encoded)</small>
        <button class="btn btn-default btn-xs" ng-click="saveFile('serverPubKey.der',pubkey.bytesDer)"
                title="Download server public key(.der)"
                type="button">
			<span aria-hidden="true" class="glyphicon glyphicon-download-alt">
        </button>
    </h4>
    <p>
        <u>Elliptic Curve parameters :</u> <code>{{pubkey.params}}</code><br/>
        <u>Public x coord :</u> <code>{{pubkey.x}}</code><br/>
        <u>Public y coord :</u> <code>{{pubkey.y}}</code>
    <div class="col-md-7">
        <u>Hex : </u>
        <pre>{{pubkey.hexDer}}</pre>
    </div>
    <div class="col-md-5">
        <u>Base64 : </u>
        <pre>{{pubkey.b64Der}}</pre>
    </div>
    <small>Clients generally need it for RPK authentication.</small>
    </p>
</div>

<div>
    <button class="btn btn-default center-block" ng-click="showModal()">Add
        new client security configuration
    </button>
</div>


<div class="table-responsive">
    <table class="table table-striped security-table">
        <thead>
        <tr>
            <th>Client Endpoint</th>
            <th>Security Mode</th>
            <th>Security Information</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="(endpoint, security) in securityInfos">
            <td>{{ endpoint }}</td>
            <td ng-if="security.psk">Pre-Shared Key</td>
            <td ng-if="security.psk">
                Identity : <code style=display:block;white-space:pre-wrap>{{ wrap(security.psk.identity) }}</code>
                Key : <code style=display:block;white-space:pre-wrap>{{ wrap(security.psk.key) }}</code>
            </td>
            <td ng-if="security.rpk">Raw Public Key <br/><small class="text-muted">(Elliptic Curve)</small></td>
            <td ng-if="security.rpk">Public Key : <br/> <code style=display:block;white-space:pre-wrap>{{wrap(security.rpk.key)}}</code><br/>
            </td>
            <td ng-if="security.x509">X.509</td>
            <td ng-if="security.x509">Uses X.509 certificate</td>
            <td>
                <button class="btn btn-default btn-xs" ng-click="remove(endpoint)" type="button">
                    <span class="glyphicon glyphicon-remove"></button>
            </td>
        </tr>
        <tbody>
    </table>
</div>

<!-- New security modal -->
<div aria-hidden="true" class="modal bs-example-modal-sm"
     id="newSecurityModal" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" class="close" data-dismiss="modal"
                        type="button">&times;
                </button>
                <h4 class="modal-title">New security configuration</h4>
            </div>
            <div class="modal-body">
                <form class="form form-horizontal" name="form" novalidate>
                    <div class="form-group" show-errors>
                        <label class="col-sm-4 control-label" for="endpointValue">Client
                            endpoint</label>
                        <div class="col-sm-8">
                            <input class="form-control" id="endpointValue" name="endpoint" ng-model="endpoint" required>
                            <p class="help-block" ng-if="form.endpoint.$error.required">The endpoint is required</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="securityMode">Security
                            mode</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="securityMode" ng-model="securityMode">
                                <option value="psk">Pre-Shared Key</option>
                                <option value="rpk">Raw Public Key</option>
                                <option value="x509">X.509 Certificate</option>
                            </select>
                        </div>
                    </div>

                    <!-- PSK inputs -->
                    <div class="form-group" ng-class="{'hidden': securityMode!='psk'}" show-errors>
                        <label class="col-sm-4 control-label" for="pskIdentityValue">Identity</label>
                        <div class="col-sm-8">
							<textarea class="form-control" id="pskIdentityValue" name="pskIdentity" ng-maxlength="128"
                                      ng-model="pskIdentity"
                                      ng-required="securityMode=='psk'" rows="3"
                                      style="resize:none"></textarea>
                            <p class="help-block" ng-if="form.pskIdentity.$error.required">The PSK identity is
                                required</p>
                            <p class="help-block" ng-if="form.pskIdentity.$error.maxlength">The PSK identity is too
                                long</p>
                        </div>
                    </div>

                    <div class="form-group" ng-class="{'hidden': securityMode!='psk'}" show-errors>
                        <label class="col-sm-4 control-label" for="pskValue">Key</label>
                        <div class="col-sm-8">
							<textarea class="form-control" id="pskValue" name="pskValue" ng-maxlength="128"
                                      ng-model="pskValue"
                                      ng-pattern="/^[0-9a-fA-F]+$/"
                                      ng-required="securityMode=='psk'" rows="3"
                                      style="resize:none"></textarea>
                            <p class="text-right text-muted small" style="margin:0">Hexadecimal format</p>
                            <p class="help-block" ng-if="form.pskValue.$error.required">The pre-shared key is
                                required</p>
                            <p class="help-block" ng-if="form.pskValue.$error.pattern">Hexadecimal format is
                                expected</p>
                            <p class="help-block" ng-if="form.pskValue.$error.maxlength">The pre-shared key is too
                                long</p>
                        </div>
                    </div>

                    <!-- RPK inputs -->
                    <div class="form-group" ng-class="{'hidden': securityMode!='rpk'}" show-errors style="resize:none">
                        <label class="col-sm-4 control-label" for="rpkValue">Client Public Key</label>
                        <div class="col-sm-8">
							<textarea class="form-control" id="rpkValue" name="rpkValue" ng-model="rpkValue"
                                      ng-pattern="/^[0-9a-fA-F]+$/"
                                      ng-required="securityMode=='rpk'" rows="3"></textarea>
                            <p class="text-right text-muted small" style="margin:0">SubjectPublicKeyInfo der encoded in
                                Hexadecimal</p>
                            <p class="help-block" ng-if="form.rpkValue.$error.required">X public key part is
                                required</p>
                            <p class="help-block" ng-if="form.rpkValue.$error.pattern">Hexadecimal format is
                                expected</p>
                        </div>
                    </div>

                    <!-- Certificates input (nothing) -->

                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
                <button class="btn btn-primary" id="newSecuritySubmit" ng-click="save()" type="button">Create</button>
            </div>
        </div>
    </div>
</div>


<style>
    .form-group .help-block {
        display: none;
    }

    .form-group.has-error .help-block {
        display: block;
    }
</style>
